{% extends "base.html" %}
{% import "_my_wtf_macros.html" as my_wtf_macros %}

{% block title %}万屏时代OPC--新增企业账号{% endblock %}

{% block panel_heading %}
    <link href="//cdn.bootcss.com/zTree.v3/3.5.23/css/zTreeStyle/zTreeStyle.css"
          rel="stylesheet">

    <style>
        #enterprise-level-body .label:hover,
        .remove-btn {
            cursor: pointer;
        }

        .remove-btn {
            margin: 10px;
        }
    </style>
{% endblock %}

{% block panel_body %}
    <div id="sub-account-template" class="hidden">
        <div class="sub-account-wrapper">
            <div class="form-group col-xs-5 ">
                <div class="row">

                    <label class="control-label  col-xs-2"
                           for="sub_mobile">手机号</label>

                    <div class="col-xs-9">

                        <input class="form-control sub-mobile-input"
                               id="sub_mobile"
                               name="sub_mobile"
                               type="text" value=""
                               onchange="sub_mobile_change($(this))">

                    </div>
                </div>
            </div>
            <div class="form-group col-xs-5 ">
                <div class="row">

                    <label class="control-label  col-xs-2"
                           for="sub_name">姓名</label>

                    <div class="col-xs-9">

                        <input class="form-control sub-name-input" disabled=""
                               id="sub_name"
                               name="sub_name" readonly="" type="text" value="">

                    </div>
                </div>
            </div>
            <div class="form-group col-xs-2 ">
                <span class="glyphicon glyphicon-minus text-danger remove-btn"
                      onclick="remove_sub_account($(this))">
                </span>
            </div>
        </div>
    </div>

    <form id="add-enterprise-form"
          action="{{ url_for('enterprise_bp.add_enterprise') }}" method="post"
          onsubmit="return on_form_submit()"
          class="form" role="form">
        {{ form.hidden_tag() }}

        <div id="enterprise-level-wrapper" class="panel panel-default">
            <div class="panel-heading">账号类型
            </div>
            <div id="enterprise-level-body" class="panel-body">
                <div class="single-choice pull-left col-md-6 tags-block">
                    <div class="tag-wrapper">
                        <p>{{ title }}</p>
                        <h4>
                            {% for key, value in level.to_options() %}
                                <div style="padding: 5px;"
                                     class="pull-left">
                                        <span class="label {% if form.level.data | string == key | string %}label-success{% else %}label-default{% endif %}"
                                              data-value={{ key }} data-name={{ name }}>
                                            {{ value }}
                                        </span>
                                </div>
                            {% endfor %}
                        </h4>
                    </div>

                </div>
            </div>
        </div>
        <div class="well well-sm">企业信息</div>
        {{ my_wtf_macros.form_field(form.enterprise_name, div_col=6, label_col=3, field_col=9) }}
        {{ my_wtf_macros.form_field(form.dispatch_limit, div_col=6, label_col=3, field_col=9) }}
        <div class="clearfix visible-xs-block visible-sm-block visible-md-block visible-lg-block"></div>

        {{ my_wtf_macros.form_field(form.start_date, div_col=6, label_col=3, field_col=9) }}
        {{ my_wtf_macros.form_field(form.expired_date, div_col=6, label_col=3, field_col=9) }}
        <div class="clearfix visible-xs-block visible-sm-block visible-md-block visible-lg-block"></div>

    {{ my_wtf_macros.form_field(form.account_limit, div_col=6, label_col=3, field_col=9) }}
        <div class="clearfix visible-xs-block visible-sm-block visible-md-block visible-lg-block"></div>
    {{ my_wtf_macros.form_field(form.enterprise_address, div_col=12, label_col=1, field_col=11) }}
        <div class="clearfix visible-xs-block visible-sm-block visible-md-block visible-lg-block"></div>
    {{ my_wtf_macros.form_field(form.remark, div_col=12, label_col=1, field_col=11) }}
        <div class="clearfix visible-xs-block visible-sm-block visible-md-block visible-lg-block"></div>

        <div class="form-group col-xs-12">
            <div class="panel panel-info" id="pack-prov-panel">
                <div class="panel-heading">
                    套餐关注城市&nbsp;&nbsp;
                    <input type="checkbox" id="CheckedAllProv"/>全选/全不选<br/>
                </div>
                <div class="panel-body">
                    <div class="hidden">
                        {{ my_wtf_macros.form_field(form.area_ids, div_col=12, label_col=1, field_col=11) }}
                    </div>
                    <div class="zTreeDemoBackground">
                        <ul id="area_id_ztree" class="ztree"></ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="clearfix visible-xs-block visible-sm-block visible-md-block visible-lg-block"></div>


        <div class="well well-sm">主账号信息</div>
        {{ my_wtf_macros.form_field(form.mobile, div_col=5, label_col=2, field_col=9) }}
        {{ my_wtf_macros.form_field(form.name, div_col=5, label_col=2, field_col=9) }}
        <div class="clearfix visible-xs-block visible-sm-block visible-md-block visible-lg-block"></div>
        <div class="well well-sm">子账号信息
            <a class="btn btn-success pull-right btn-xs"
               id="add-sub_account-btn">
                添加子账号
            </a>
        </div>

        <div id="sub-account-info">
            <div class="sub-account-wrapper">
                <div class="form-group col-xs-5 ">
                    <div class="row">

                        <label class="control-label  col-xs-2"
                               for="sub_mobile">手机号</label>

                        <div class="col-xs-9">

                            <input class="form-control sub-mobile-input"
                                   id="sub_mobile"
                                   name="sub_mobile"
                                   type="text" value=""
                                   onchange="sub_mobile_change($(this))">

                        </div>
                    </div>
                </div>
                <div class="form-group col-xs-5 ">
                    <div class="row">

                        <label class="control-label  col-xs-2"
                               for="sub_name">姓名</label>

                        <div class="col-xs-9">

                            <input class="form-control sub-name-input"
                                   disabled=""
                                   id="sub_name"
                                   name="sub_name" readonly="" type="text"
                                   value="">

                        </div>
                    </div>
                </div>
                <div class="form-group col-xs-2">
                    <span class="glyphicon glyphicon-minus text-danger remove-btn"
                          onclick="remove_sub_account($(this))"
                    ></span>
                </div>
            </div>
        </div>
        <div class="clearfix visible-xs-block visible-sm-block visible-md-block visible-lg-block"></div>

        <div class="pull-right">
            <button type="submit" class="btn btn-success"
                    id="add-enterprise-btn">
                新增
            </button>
        </div>

    </form>

{% endblock %}

{% block scripts %}
    {{ super() }}

    <script src="//cdn.bootcss.com/zTree.v3/3.5.24/js/jquery.ztree.core.js"></script>
    <script src="//cdn.bootcss.com/zTree.v3/3.5.24/js/jquery.ztree.excheck.js"></script>
    <script>

        function on_mobile_change(mobile_obj, name_obj, update_user_id) {
            var mobile = $(mobile_obj).val();
            if (mobile) {
                $.ajax({
                    url: "{{ url_for('op_bp.ajax_get_user_info_by_mobile')}}",
                    cache: false,
                    data: {
                        mobile: mobile
                    }
                }).done(function (data) {
                    console.log(data);
                    if (data.status) {
                        name_obj.val(data.nickname);
                        if (update_user_id) {
                            $('#user_id').val(data.user_id);
                        }else{
                            mobile_obj.data('account_info', data)
                        }
                    } else {
                        name_obj.val('');
                        if(update_user_id){
                            $('#user_id').val('');
                        }
                    }
                }).fail(function () {
                    alert('服务器错误');
                })
            }
        }

        function sub_mobile_change(obj) {
            var name_obj = obj.parents(".sub-account-wrapper").first().find('.sub-name-input').first();
            on_mobile_change(obj, name_obj, false)
        }

        function remove_sub_account(obj) {
            var wrapper = obj.parents(".sub-account-wrapper").first();
            wrapper.remove();
        }
        
        function prepare_area_data() {
            var treeObj = $.fn.zTree.getZTreeObj("area_id_ztree");
                var nodes = treeObj.getCheckedNodes(true);
                var area_ids = [];
                for (var index in nodes) {
                    area_ids.push(nodes[index].id);
                }
                var area_checkboxs = $('#add-enterprise-form').find('#area_ids').find('input');
                for (var i in area_checkboxs) {
                    if (area_ids.indexOf(area_checkboxs[i].value) > -1) {
                        area_checkboxs.eq(i).prop("checked", true);
                    }
                }
        }

        // 提交前等级数据确定
        function prepare_level_data() {
            var selected_level = $('#enterprise-level-body .label-success:first');
            if (selected_level.length){
                $('#level').val(selected_level.data('value'));
                return true
            }
            return false
        }

        // 子账号数据
        function prepare_sub_account_data() {
            var sub_account = [];
            $('#sub-account-info .sub-mobile-input').each(function (i, obj) {
                var info = $(obj).data('account_info');
                if(info){
                    sub_account.push(info.user_id);
                }

            });
            $('#sub_account').val(JSON.stringify(sub_account));
        }
        
        function on_form_submit() {
            prepare_area_data();
            var make_sure_had_level = prepare_level_data();
            var msg = "请检查表单数据";
            prepare_sub_account_data();
            if(!make_sure_had_level){
                msg = "企业等级未选";
                alert(msg);
                return false
            }
            if (!$('#user_id').val()){
                msg = "企业主信息未填";
                alert(msg);
                return false;
            }
            return true;
        }


        $(document).ready(function () {

            $('#add-enterprise-form').find('#area_ids').find('input').prop("checked", false);
            var ztree_setting = {
                check: {
                    enable: true,
                    chkboxType: {"Y": "s", "N": "s"}
                },
                data: {
                    simpleData: {
                        enable: true
                    }
                }
            };

            $.fn.zTree.init($("#area_id_ztree"), ztree_setting, JSON.parse('{{z_tree_data | safe}}'));


            // 账号等级标签点击效果
            $('#enterprise-level-body .single-choice .label').each(function (i, obj) {
                obj.onclick = function () {
                    var current_state = ($(obj).hasClass('label-success'));
                    $(obj).closest('.tags-block').find('.label').each(function (i, tag) {
                        $(tag).removeClass('label-success');
                        $(tag).addClass('label-default');
                    });
                    if (!current_state) {
                        $(obj).addClass('label-success');
                    }
                    else {
                    }
                };
            });

            // 套餐关注城市全选/全不选功能
            $("#CheckedAllProv").click(function () {
                var treeObj = $.fn.zTree.getZTreeObj("area_id_ztree");
                treeObj.checkAllNodes(this.checked);
            });

            // 企业主账号修改事件
            $('#mobile').change(function () {
                on_mobile_change($(this), $('input[name=name]'), true)

            });

            $('#add-sub_account-btn').click(function () {
                $('#sub-account-info').append($('#sub-account-template').children().clone());
            })

        });

    </script>
{% endblock %}
